<template>
    <el-container>
        <el-header>
            <div class="header-box">
                <img class="logo" src="../assets/image/logo.png" alt="wyy" />
                <Search></Search>
            </div>
        </el-header>
        <el-container>
            <el-aside>
                <router-link to="/home">
                    <div class="aside-item">
                        <i class="iconfont icon-good"></i>
                        <p>个性推荐</p>
                    </div>
                </router-link>
                <router-link to="/song_sheet">
                    <div class="aside-item">
                        <i class="iconfont icon-gedan"></i>
                        <p>歌单</p>
                    </div>
                </router-link>
                <router-link to="/the_chart">
                    <div class="aside-item">
                        <i class="iconfont icon-bofangliebiao"></i>
                        <p>排行榜</p>
                    </div>
                </router-link>
                <router-link to="/singer">
                    <div class="aside-item">
                        <i class="iconfont icon-yinle"></i>
                        <p>歌手</p>
                    </div>
                </router-link>
            </el-aside>
            <el-main>
                <!-- 占位符  -->
                <router-view></router-view>
            </el-main>
        </el-container>
        <Player></Player>
    </el-container>
</template>
<script>
import Player from "@/components/player/Player";
import Search from "@/components/search/Search";

export default {
    components: { Player, Search }
};
</script>
<style lang="less" scoped>
// 引入字体图标
@import url("../assets/font/font.css");
@import "https://at.alicdn.com/t/font_2559410_7ih6tcqtq07.css?spm=a313x.7781069.1998910419.47&file=font_2559410_7ih6tcqtq07.css";

.el-container {
    background-color: #fff;
    height: 100%;
    box-sizing: border-box;

    .el-header {
        display: flex;
        align-items: center;
        background-color: #ec4141;
        height: 60px !important;
        .header-box {
            display: flex; // 弹性盒子 布局
            justify-content: space-between;
            padding: 0 80px 0 30px;
            width: 100%;
            align-items: center;
            background-color: #ec4141;

            .logo {
                height: 50px;
                width: 200px;
            }
        }
    }
    .el-aside {
        background-color: white;
        border-right: 1px solid #d0d0ce;
        width: 300px !important;
        .router-link-exact-active {
            color: #000;
            font-weight: 700;
        }
        .router-link-active {
            color: #000;
            font-weight: 700;
            position: relative;
            z-index: 2;
            &::after {
                content: "";
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
                width: 100%;
                height: 100%;
                background-color: #f6f6f4;
            }
        }
        a {
            color: #000;
        }
        .aside-item {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 15px;
            padding: 18px 50px;
            cursor: pointer;
            i {
                font-size: 21px;
            }
            p {
                padding-left: 3px;
            }

            &:hover {
                background-color: #f6f6f4;
                font-weight: 700;
            }
        }
    }
    .el-main {
        box-sizing: border-box;
        background-color: rgb(255, 255, 255);
        overflow: scroll;
        padding: 0;
        height: calc(100vh - 60px);
    }
}
</style>
